import React, {
    PureComponent
} from 'react';

import {
    Tip,
    Empty,
    ListView
} from './../../../components';

import Item from './item';

import connect from './../../../utils/connect';
import connectionAction from './../../../state/actions/connection';
import * as connectionTypes from './../../../state/types/connection';

import chatAction from './../../../state/actions/chat';
import * as chatTypes from './../../../state/types/chat';

import favPic from './../../../images/home/connect/no_favs.png';
import matchPic from './../../../images/home/connect/no_match.png';
import visitorPic from './../../../images/home/connect/no_visitors.png';

interface Props {
    user: any,
    chat:any
    orderBy: any,
    connection:any,
    chatActions:any,
    connectionActions:{}
}

const emptyMaps:any = {
    visitor:visitorPic,
    likedMe:matchPic,
    matched:favPic,
    liked:favPic
}

@connect([`connection`, `user`,`chat`], {
    chatActions:chatAction,
    connectionActions: connectionAction
})
class Content extends PureComponent<Props, any> {

    static defaultProps = {
        user:{},
        chat:{},
        chatActions:{},
        connection:{},
        connectionActions:{}
    }

    get loginUser() {
        const {
            user
        } = this.props;
        const {
            loginUser = {}
        } = user;
        return loginUser;
    }

    get chatActions() {
        const {
            chatActions
        } = this.props;
        return chatActions;
    }

    get chatState() {
        const {
            chat
        } = this.props;
        return chat;
    }

    get unRead() {
        const {
            unReadConnection
        } = this.chatState;
        return unReadConnection || {}
    }

    get unreadKey() {
        const {
            orderBy
        } = this.props;
        return `${orderBy}_${this.userId}`;
    }

    get unReadIds() {
        return this.unRead[this.unreadKey] || [];
    }

    get userId() {
        const {
            userId = 0
        } = this.loginUser;
        return userId;
    }

    get lastId(): number {
        const {
            length
        } = this.queryList;
        const {
            id = 0,
            likeId = 0,
            visitId = 0
        } = this.queryList[length - 1] || {}
        return id || likeId || visitId || 0;
    }

    get queryList(): Array<any> {
        const {
            orderBy,
            connection = {}
        } = this.props;
        const _key = (
            `${orderBy}_${this.userId}`
        )
        return connection[_key] || [];
    }

    get dataSource() {
        return [...this.queryList]
    }

    get connectionActions(): any {
        const {
            connectionActions
        } = this.props;
        return connectionActions;
    }

    get typeName():any {
        const {
            orderBy
        } = this.props;
        switch (orderBy) {
            case `liked`: return (
                connectionTypes.getILikeUser
            )
            case `likedMe`: return (
                connectionTypes.getLikeMeUser
            )
            case `visitor` :return (
                connectionTypes.getVisitedUser
            )
            case `matched`:return (
                connectionTypes.getMatchedUser
            )
        }
    }

    private onRefresh = async (done:Function) => {
        let list = [];
        let success = true;
        try {
            list = (
                await this.onLoadList(0)
            )
            //如果没有数据
            if(!list.length) {
                this.clearAllDotNum()
            }
        }
        catch (e) {
            success = false
            Tip.warm({
                message: e.message
            })
        }
        done(list,success);
    }

    private clearAllDotNum = () => {
        const {
            orderBy
        } = this.props;
        this.chatActions[
            chatTypes.clearUnReadForTab
        ](orderBy);
    }

    private onLoadList = (lastId = 0) => {
        const {
            orderBy
        } = this.props;

        const _query = {
            lastId: lastId,
            isPush: !!lastId,
            orderBy: orderBy
        }

        return this.connectionActions[
            this.typeName
        ](_query);
    }

    private onLoadPage = async (done:Function) => {
        let list = [];
        let success = true;
        try {
            list = (
                await this.onLoadList(
                    this.lastId
                )
            )
        }
        catch (e) {
            success = false;
            Tip.warm({
                message: e.message
            })
        }

        done(list,success);
    }

    private onClearDot = (userId:number) => {
        this.chatActions[
            chatTypes.clearConnectionUnRead
        ](this.unreadKey,userId)
    }


    private renderItem = ({item}:any) => {
        return (
            <Item
                data={item}
                onPress={this.onClearDot}
                unReadIds={this.unReadIds}
            />
        )
    }

    render() {
        const {
            orderBy
        } = this.props;
        return (
            <ListView
                data={this.dataSource}
                onLoadTop={this.onRefresh}
                onLoadPage={this.onLoadPage}
                renderItem={this.renderItem}
                ListEmptyComponent={(
                    <Empty
                        title="No results."
                        icon={emptyMaps[orderBy]}
                    />
                )}
            />
        )
    }
}

export default Content;